<template>
	<view>
		<view class="zh">账号注册</view>
		<view class="box">
			<view class="xian">
				<view class="inp">
					<text>+86</text>
					<image src="../../static/login_bottom.png" mode=""></image>
					<input type="number" value="" v-model="phone" placeholder="请输入您的手机号码" placeholder-style="font-size: 36rpx; color: #BFBFBF;" style="padding-left: 30rpx;" />
				</view>
				<view style="height: 2rpx; width: 100%; background: #E9E9E9;"></view>
			</view>
			<view class="xian">
				<view class="inp">
					<input type="password" v-model="password" placeholder="请输入您的密码" placeholder-style="font-size: 36rpx; color: #BFBFBF;" />
				</view>
				<view style="height: 2rpx; width: 100%; background: #E9E9E9;"></view>
			</view>
			<view class="xian">
				<view style="display: flex;align-items: center; justify-content: space-between;margin-bottom: 30rpx;">
					<input type="number" v-model="code" placeholder="请输入手机验证码" placeholder-style="font-size: 36rpx; color: #BFBFBF;" />
					<text v-if="y" @click="yzm" class="yzm">发送验证码</text>
					<text v-else class="yzm">{{num}}s</text>
				</view>
				<view style="height: 2rpx; width: 100%; background: #E9E9E9;"></view>
			</view>
		</view>
		<view class="dl" @click="register">
			<view class="dll">
				注册
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				y:true,
				phone:'',
				password:'',
				code:'',
				num:60
			}
		},
		methods: {
			async register() {
				if(this.phone==''||this.code==''||this.password==''){
					return uni.showToast({
						title: '您还有未填写资料请检查',
						duration: 1500,
						icon:'none'
					});
					
				}
				const res = await this.post('/Index/index/register', {
					mobile: this.phone,
					password: this.password,
					code: this.code
				})
				if(res.code==200){
					uni.showToast({
						title: '注册成功',
						duration: 1500,
						icon:'none'
					});
					 uni.setStorageSync('auth',res.data.token);
					 uni.navigateTo({
					 	url:'../index/index'
					 })
				}
			},
			async yzm() {
				// let self=this;
				if (this.phone == '') {
					return uni.showToast({
						title: '手机号不能为空',
						duration: 1500,
						icon:'none'
					});
					return
				}
				const res = await this.post('/Index/index/send_mobile_code', {
					mobile: this.phone
				})
				if(res.code==200){
					this.y=false;
					let time=setInterval(() => {
						this.num--;
						if(this.num<=0){
							clearInterval(time)
							time=null
							this.y=true;
						}
						console.log(this.num)
					},1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dl {
		padding: 30rpx 44rpx;
		.dll {
			width: 100%;
			height: 90rpx;
			color: #FFFFFF;
			font-size: 36rpx;
			line-height: 90rpx;
			text-align: center;
			border-radius: 15rpx;
			background-color: #3291F8;
		}
	}

	.zh {
		font-size: 64rpx;
		margin: 90rpx 0 90rpx 40rpx;
	}

	.box{
		.xian{
			padding: 0 44rpx;
			margin-top: 40rpx;
			.inp{
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				box-sizing: border-box;
				text{
					color: #404040;
					font-size: 32rpx;
					margin-right: 10rpx;
				}
				image{
					width: 28rpx;
					height: 28rpx;
				}
				input{
					width: 100%;
					line-height: 100rpx;
				}
			}
		}
	}
	
	.yzm{
		color: #3291F8;
		font-size: 36rpx;
	}
</style>
